<template>
	<div v-if="menuRender">
		<!--<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
		<!--<el-radio-button :label="false">展开</el-radio-button>-->
		<!--<el-radio-button :label="true">收起</el-radio-button>-->
		<!--</el-radio-group>-->
		<div class="logo_Word">
			<div v-if="!isCollapse">大美智能管理系统</div>
			<img v-if="isCollapse" style="width: 50px; height: 50px" src="../assets/img/wode_shezhi_icon-guanyu.png" alt />
		</div>
		<div class="collapse_btn collapse_btn1" @click="collapseVal(1)" v-if="!isCollapse" value="collapseVal">
			<i class="el-icon-caret-left" style="cursor: pointer;font-size: 20px;color: #FFF;"></i>
		</div>
		<div class="collapse_btn collapse_btn2" @click="collapseVal(2)" v-if="isCollapse" value="collapseVal">
			<i style="cursor: pointer;font-size: 20px;color: #FFF;" class="el-icon-caret-right"></i>
		</div>
		<el-menu
			:unique-opened="true"
			:default-active="activeIndex"
			class="el-menu-vertical-demo"
			@select="clickVal"
			value="clickVal"
			@open="handleOpen"
			@close="handleClose"
			:collapse="isCollapse"
			:style="!isCollapse ? 'width: 200px;' : ''"
		>
			<div id="logo" style="text-align: right;padding-right: 15px;">
				<!--<img  style="margin-top: 10px; cursor: pointer;"  src="../assets/img/s_logo.jpg" height="33"/>-->
				<!--<img  style="margin-top: 10px; cursor: pointer;"  src="../assets/img/s_logo.jpg" height="33"/>-->
			</div>
			<div v-for="(item, index) in TopMenu" :key="index">
				<el-submenu :index="item.name" v-if="item.children && item.children.length !=0 && item.menu != false">
					<template slot="title">
						<svg-icon v-if="item.icon" :icon-class="item.icon" style="margin-right: 10px;font-size: 16px;line-height: 16px;"></svg-icon>
						<span v-if="!isCollapse">{{ item.title }}</span>
					</template>
					<div v-for="(i, s) in item.children" :key="s">
						<el-menu-item :index="i.name" v-if="!i.children && i.menu != false">
							<svg-icon v-if="i.icon" :icon-class="i.icon" style="margin-right: 10px;font-size: 16px;line-height: 16px;"></svg-icon>
							{{ i.title }}
						</el-menu-item>
						<div v-else-if="i.children && i.menu != false">
							<el-submenu :index="i.name">
								<template slot="title">
									<svg-icon v-if="i.icon" :icon-class="i.icon" style="margin-right: 10px;font-size: 16px;line-height: 16px;"></svg-icon>
									{{ i.title }}
								</template>
								<div v-for="(m, n) in i.children" :key="n">
									<el-menu-item :index="m.name" v-if="!m.children">
										<svg-icon v-if="m.icon" :icon-class="m.icon" style="margin-right: 10px;font-size: 16px;line-height: 16px;"></svg-icon>
										{{ m.title }}
									</el-menu-item>
									<el-submenu :index="m.name" v-else>
										<template slot="title">
											<svg-icon v-if="m.icon" :icon-class="m.icon" style="margin-right: 10px;font-size: 16px;line-height: 16px;"></svg-icon>
											{{ m.title }}
										</template>
										<el-menu-item v-for="(t, b) in m.children" :key="b" :index="t.name">{{ t.title }}</el-menu-item>
									</el-submenu>
								</div>
							</el-submenu>
						</div>
						<div v-else></div>
					</div>
				</el-submenu>
				<div v-else></div>
				<!-- <el-menu-item :index="item.name" v-else>
					<el-menu-item :index="item.name" v-if="item.children && item.hidden != false">
						<svg-icon v-if="item.icon" :icon-class="item.icon"></svg-icon>
						<span v-if="!isCollapse">{{ item.title }}</span>
					</el-menu-item>
					<div v-else></div>
				</el-menu-item> -->
				
				
			</div>
		</el-menu>
	</div>
</template>

<script>
import { menuList } from '../server/index.js';
export default {
	name: 'leftnav',
	data() {
		return {
			isCollapse: false,
			ruleForm: {},
			menu: {},
			menuRender: false,
			systemTitle: '组织机构'
		};
	},
	computed: {
		TopMenu() {
			return this.$store.state.TopMenu;
			// return this.menuMatching(this.$store.state.TopMenu, this.menu).filter(Boolean);
		},
		activeIndex() {
			return this.$store.state.Active;
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		getList() {
			let _this = this;
			_this.menuRender = true;
			_this.http.request({
				url: menuList,
				data: {},
				success: function(res) {
					_this.menu = res;
					this.$store.state.TopMenu = _this.menu;
				}
			});
		},
		handleOpen() {
			// console.log(key, keyPath);
		},
		handleClose() {
			// console.log(key, keyPath);
		},
		clickVal(index) {
			this.systemTitle = index;
			this.$emit('systemName', this.systemTitle);
			this.$router.push({
				name: index
			});
		},
		collapseVal(index) {
			if (index == 1) {
				this.isCollapse = true;
				this.$emit('leftHeader', this.isCollapse);
			} else {
				this.isCollapse = false;
				this.$emit('leftHeader', this.isCollapse);
			}
		},
		// menuMatching(router, res) {
		// 	// 导航数据过滤  路由列表是完整数据，根据登录用户的权限显示不同导航
		// 	return router.map(item => {
		// 		// 用本地的路由列表完整数据比较，后台返回的数据进行过滤，如果相等就返回数据给item2
		// 		let item2 = res.filter(r => {
		// 			if (item.title === r.title) {
		// 				return r;
		// 			}
		// 		})[0];
		// 		//在判断是否有子元素是否满足条件，对子元素进行过滤
		// 		if (item2) {
		// 			if (item.title == item2.title) {
		// 				if (item.children) {
		// 					item.children = this.menuMatching(item.children, item2.children).filter(Boolean);
		// 				}
		// 				return item;
		// 			}
		// 		}
		// 	});
		// }
	}
};
</script>

<style>
.el-submenu__title:hover,
.el-submenu .el-menu-item:hover,
.el-menu-item:hover,
.el-menu-item.is-active {
	background: #716aca !important;
	color: #fff !important;
}

.collapse_btn {
	width: 30px;
	height: 82px;
	line-height: 82px;
	background: rgba(245, 55, 87, 1);
	border-radius: 0px 10px 10px 0px;
	position: absolute;
	z-index: 999;
	top: 40%;
}

.collapse_btn1 {
	left: 200px;
}

.collapse_btn2 {
	left: 64px;
}

.logo_Word {
	height: 60px;
	line-height: 60px;
	color: #fff;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 99%;
	min-height: 400px;
}

.el-icon-arrow-left,
.el-icon-arrow-right {
	color: #fff;
}

.el-submenu__title,
.el-menu-item {
	text-align: left;
}

.el-aside,
.el-menu {
	background: #221f51;
	border: none;
}

.el-menu-item,
.el-submenu__title {
	color: #fff;
}

.el-submenu__title:hover,
.el-submenu .el-menu-item:hover,
.el-menu-item:hover,
.el-menu-item.is-active {
	color: #409eff;
	background: #fff;
}
</style>
